import React, {Component} from 'react';
import {Tooltip} from "antd";
import {QuestionCircleOutlined} from '@ant-design/icons'
import TheImage from "../../../../components/TheImage";
import upTriangle from '@/assets/icons/upTriangle.png'
import downTriangle from '@/assets/icons/downTriangle.png'

class ChartContent extends Component {
    render() {
        const {dataSource: {title, tip, dateBegin, dateEnd, time, val, valUnit, hb, tb, combined, combinedUnit, mean, meanUnit}} = this.props
        return <>
            <div className={'plus-chart-line-header'}>
                <div>
                    <span className={'title'}>{title}</span>
                    <Tooltip title={tip}>
                        <QuestionCircleOutlined/>
                    </Tooltip>
                </div>
                {/*<span className={'date'}>{`${dateBegin}~${dateEnd}`}</span>*/}
                <span className={'date'}>{time}</span>
            </div>
            <div className={'plus-chart-line-content'}>
                <div className={'content-left'}>
                    <div>
                        <span className={'content-number'}>{val}</span>
                        <span className={'content-unit'}>{valUnit}</span>
                    </div>
                    <div>
                        <div className={`${hb > 0 ? 'content-up' : hb < 0 ? 'content-down' : 'chart-content'}`}>
                            {hb > 0 ? <TheImage src={upTriangle} width={12}/> : hb < 0 ?
                                <TheImage src={downTriangle} width={12}/> :
                                <div style={{width: 12, height: 12, marginRight: 5}}/>}
                            <span>环比</span><span className={'content-num'}>{Math.abs(hb * 1)}%</span>
                        </div>
                        <div className={`${tb > 0 ? 'content-up' : tb < 0 ? 'content-down' : 'chart-content'}`}>
                            {tb > 0 ? <TheImage src={upTriangle} width={12}/> : tb < 0 ?
                                <TheImage src={downTriangle} width={12}/> :
                                <div style={{width: 12, height: 12, marginRight: 5}}/>}
                            <span>同比</span><span className={'content-num'}>{Math.abs(tb * 1)}%</span>
                        </div>
                    </div>
                </div>
                <div className={'content-right'}>
                    <div>
                        <span className={'content-type'}>合计</span>
                        <span className={'content-number'}>{combined}</span>
                        <span className={'content-unit'}>{combinedUnit}</span>
                    </div>
                    <div>
                        <span className={'content-type'}>均值</span>
                        <span className={'content-number'}>{mean}</span>
                        <span className={'content-unit'}>{meanUnit}</span>
                    </div>
                </div>
            </div>
        </>
    }
}

export default ChartContent;